import React, { Component } from 'react';
import PropTypes from 'prop-types';
// import Typography from '@material-ui/core/Typography';
import { Button, Typography, ListItem, ListItemIcon, ListItemText, ListSubheader } from '@material-ui/core';
import { Dashboard, ShoppingCart, People, BarChart, Layers, Assignment } from '@material-ui/icons';
import { LineChart, Line, XAxis, YAxis, Label, ResponsiveContainer } from 'recharts';

export interface IHelloWorldProps {
  children: string;
}

class HelloWorld extends React.Component<IHelloWorldProps> {
  render() {
    // const theme = useTheme();
    function createData(time, amount) {
      return { time, amount };
    }
    const data = [
      createData('00:00', 0),
      createData('03:00', 300),
      createData('06:00', 600),
      createData('09:00', 800),
      createData('12:00', 1500),
      createData('15:00', 2000),
      createData('18:00', 2400),
      createData('21:00', 2400),
      createData('24:00', undefined)
    ];
    // const theme = useTheme();
    return (
      <div>
        {/* <Alert dismissible variant="danger">
          <Alert.Heading>Oh snap! You got an error!</Alert.Heading>
          <p>
            Change this and that and try again.
          </p>
        </Alert> */}
      <Typography component="h2" variant="h6" color="primary" gutterBottom>
      Recent Orders
      </Typography>
        <Button color="primary" >Close</Button>
        <ListItem button>
      <ListItemIcon>
        <Dashboard />
      </ListItemIcon>
      <ListItemText primary="Dashboard" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <ShoppingCart />
      </ListItemIcon>
      <ListItemText primary="Orders" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <People />
      </ListItemIcon>
      <ListItemText primary="Customers" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <BarChart />
      </ListItemIcon>
      <ListItemText primary="Reports" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <Layers />
      </ListItemIcon>
      <ListItemText primary="Integrations" />
    </ListItem>
    <ResponsiveContainer>
        <LineChart
          data={data}
          margin={{
            top: 16,
            right: 16,
            bottom: 0,
            left: 24
          }}
        >4841</LineChart>
      </ResponsiveContainer>
      </div>
    );
  }
}

export default HelloWorld;
